<script setup lang="ts">
import { queryServerConfig } from '@/api';
import CareAdd from '@/components/add-care-level/index.vue';
import { useCareLevel, useCareTag } from '@/hooks';
import { useCareStore } from '@/store';
import { getServiceConfigColumns, mergeTableList } from '@/tools/care';
import type { SelectOption } from '@/types/option';
import { message } from 'ant-design-vue';
import { storeToRefs } from 'pinia';
import { onMounted, ref } from 'vue';
// import { CARE_SERVICE_TAG_OPTIONS } from '@/const/index.ts';
// import TagChecked from '@/components/tag-checked/index.vue';
import ServiceAdd from './service-add.vue';

const store = useCareStore();
const { levels } = storeToRefs(store);
const { deleteLevel } = store;

const loading = ref(true);

const dataSource = ref<any[]>([]);

useCareLevel();
useCareTag();

const del = (level: SelectOption) => {
	deleteLevel(Number(level.value)).then(() => {
		message.success('删除成功');
	});
}

const queryConfig = () => {
	queryServerConfig().then((res) => {
		const list = res.Data?.Settings || [];
		dataSource.value = mergeTableList(list, 'Levels');
	}).finally(() => {
		loading.value = false;
	});
}

onMounted(() => {
	queryConfig();
});

</script>

<template>
	<div class="form-wrap">
		<a-form layout="vertical">
			<a-form-item label="照护等级配置" class="mb0">
				<a-space wrap>
					<a-badge v-for="(level, index) in levels" :key="index">
						<template #count>
							<img @click="del(level)" src="@/assets/del.svg" />
						</template>
						<a-button>{{ level.label }}</a-button>
					</a-badge>
					<CareAdd>
						<a-button type="dashed">+ 新增</a-button>
					</CareAdd>
				</a-space>
			</a-form-item>
		</a-form>
	</div>
	<div class="form-wrap mt20">
		<div class="flex justify-between items-center mb20">
			<div>
				<h4>服务项配置</h4>
				<!-- <a-form>
					<a-form-item label="名称">
						<a-input></a-input>
					</a-form-item>
					<a-form-item label="标签">
						<TagChecked :options="CARE_SERVICE_TAG_OPTIONS"></TagChecked>
					</a-form-item>
					<a-form-item label="应用等级" class="mb0">
						<TagChecked :options="levels"></TagChecked>
					</a-form-item>
				</a-form> -->
			</div>
			<ServiceAdd @add="queryConfig"></ServiceAdd>
		</div>
		<a-table :loading="loading" :dataSource="dataSource" :columns="getServiceConfigColumns()" bordered :pagination="false">
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'operation'">
					<a-space>
						<ServiceAdd type="edit" :data="record" @add="queryConfig">
							<a-button type="link" class="p0">编辑</a-button>
						</ServiceAdd>
						<a-button type="link" class="p0" danger>删除</a-button>
					</a-space>
				</template>
				<template v-if="column.dataIndex === 'Tag'">
					 {{ record.Tag?.Name || '-' }}
				</template>
				<template v-if="column.dataIndex === 'Level'">
					 {{ record.Level?.Name || '全部' }}
				</template>
				<template v-if="column.dataIndex === 'Way'">
					{{ record?.Way?.Name }}
				</template>
				<template v-if="column.dataIndex === 'Name'">
					{{ record?.Name || '-' }}
				</template>
			</template>
		</a-table>
	</div>
</template>
<style scoped></style>
